<template lang="">
  <div id="test_app">
    <!-- 搜索表单 -->
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
      style="margin-top: 20px"
    >
      <el-form-item label="销售订单编号">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入销售订单编号"
        />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select
          v-model="queryParams.orderStatus"
          placeholder="请选择订单状态"
          size="large"
        >
          <el-option
            v-for="(item, index) in status"
            :key="index"
            :label="item"
            :value="index"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 现有的表格代码 -->
    <el-table v-loading="loading" :data="orders">
      <el-table-column
        label="销售订单编号"
        align="center"
        prop="orderId"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="客户"
        align="center"
        prop="customer.customerName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单状态"
        align="center"
        prop="orderStatus"
        :formatter="orderStatusFormatter"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="销售人员"
        align="center"
        prop="salesPerson.userName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="销售订单送货地址"
        align="center"
        prop="shoppingAddress"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单完成时间"
        align="center"
        prop="orderDate"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单创建时间"
        align="center"
        prop="createTime"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="商品总数量" prop="totalQuantity" align="center" />
      <el-table-column label="总价格" align="center" prop="totalPrice" />
    </el-table>
    <!-- 分页显示 -->
    <!-- <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>
<script setup>
import { listOrders } from "@/api/sale/order";
// const router = useRouter();
const { proxy } = getCurrentInstance();
// const { sys_job_group, sys_job_status } = proxy.useDict(
//   "sys_job_group",
//   "sys_job_status"
// );
const status = ref(["未发货", "已完成", "退货"]);
const orders = ref([]);
const persons = ref([]);
const products = ref([]);
const open = ref(false);
const checkopen = ref(false);
const addopen = ref(false);
const productAddopen = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const totalP = ref(0);
const totalPro = ref(0);
const selectedId = ref(null);
const title = ref("");
const queryopen = ref(false);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    orderId: undefined,
    orderStatus: undefined,
  },
  rules: {},
});

const { queryParams, form, rules } = toRefs(data);

/** 查询定时任务列表 */
function getList() {
  // loading.value = true;
  listOrders(queryParams.value).then((response) => {
    loading.value = false;
    orders.value = response.data;
    // total.value = response.data.total;
    orders.value.forEach((element) => {
      const total_quantity = element.orderDetails.reduce(
        (acc, detail) => acc + detail.total,
        0
      );
      const total_price = element.orderDetails.reduce(
        (acc, detail) => acc + detail.totalAmount,
        0
      );
      element.totalQuantity = total_quantity;
      element.totalPrice = total_price;
    });
    console.table(orders.value);
  });
}

//状态展示文字加工
function orderStatusFormatter(row) {
  // 确保 orderStatus 是有效的索引
  if (row.orderStatus !== undefined && row.orderStatus < status.value.length) {
    return status.value[row.orderStatus];
  }
  return ""; // 或者返回一个默认值
}
/** 查询操作 */
function resetQuery() {
  queryParams.value.pageNum = 1; // 重置页码为第一页
  (queryParams.value = {
    pageNum: 1,
    pageSize: 5,
    orderId: undefined,
    orderStatus: undefined,
  }),
    getList(); // 调用获取列表的方法
}

function handleQuery() {
  queryParams.value.pageNum = 1; // 重置页码为第一页

  getList(); // 调用获取列表的方法
}
getList();
</script>
<style>
.el-select {
  width: 200px;
  /* 设置宽度 */
}
</style>
